<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>积分兑换</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //点击签到按钮实现已签到功能和天数增加功能
            $('#btn').one('click', function () {
                $(this).text("已签到")
                var numday = parseInt($('#numday').text())
                numday++
                $('#numday').text(numday)
                var numinter = parseInt($('#numinter').text())
                numinter = numinter + 2
                $('#numinter').text(numinter)
            })
            //点击切换规则明细
            $('#shop').click(function () {
                $('.jf_shop').css('display', 'block')
                $('.jf_exchange').css('display', 'none')
            })
            $('#rule').click(function () {
                $('.jf_shop').css('display', 'none')
                $('.jf_exchange').css('display', 'block')
            })
            //点击实现兑换成功！
            $('.exbtn').click(function () {
                alert('兑换成功！')
            })
        })
        window.onload = function () {
            document.querySelector('#headPic').onclick = function () {
                document.querySelector('#headPic input').click()     //模拟表单元素被单击
            }
        }
        function changeHeadPic() {
            //1.获取图片文件
            var fileHead = document.querySelector('#headPic input').files[0]
            //2.文件读取图片
            var fread = new FileReader()
            fread.onload = function (e) {
                //3.把图片显示在页面中
                document.querySelector('#headPic>img').src = e.target.result
            }
            fread.readAsDataURL(fileHead)
        }
    </script>
    <link rel="stylesheet" href="css/intergral.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
</head>

<body>
    <div id="intergral">
        <nav class="menu-wrap">
            <div id="headPic">
                <img id="headPicimg" src="images/icon_shangjie.gif" alt="">
                <div id="mask">
                    <img id="innerImg"
                        src=""
                        alt="">
                </div>
                <form action="#">
                    <input type="file" name="" id="" accept="image/jpg" onchange="changeHeadPic()" style="display:none">
                </form>
            </div>
            <div class="menu">
                <ul>

                    <li>
                        <a href="shouye.html">
                            <i class="fa fa-home fa-lg"></i>
                            <span class="nav-text">首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="edit.html">
                            <i class="fa fa-bullhorn fa-lg"></i>
                            <span class="nav-text">编辑资料</span>
                        </a>
                    </li>
                    <li>
                        <a href="sharemenu.html">
                            <i class="fa fa-user fa-lg"></i>
                            <span class="nav-text">上传菜谱</span>
                        </a>
                    </li>
                    <li>
                        <a href="personal.html">
                            <i class="fa fa-envelope-o fa-lg"></i>
                            <span class="nav-text">已发布的内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="shoucang.html">
                            <i class="fa fa-heart-o fa-lg"></i>
                            <span class="nav-text">收藏</span>
                        </a>
                    </li>
                    <li>
                        <a href="integral.html">
                            <i class="fa fa-shopping-bag fa-lg"></i>
                            <span class="nav-text">积分兑换</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="main">
            <div id="signin">
                <div id="txtsign">
                    <span id="username"></span><br>
                    <button id="btn" class="fa fa-location-arrow">签到</button>
                    <span id="days">总签到数<i id="numday">1</i>天，</span>
                    <span id="inter">已获得<i id="numinter">2</i>积分</span>
                </div>
            </div>
            <div class="jf_levelrule_w">
                <div class="jf_subtabs1">
                    <strong id="shop">积分商店</strong>
                    <strong id="rule">兑换记录</strong>
                </div>
                <div class="jf_shop">
                    <div class="jjg_goods_mainlist">
                        <div class="clearfix jjg_goods_mainlist_w">
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190704/20190704112526_66756.jpg">
                                </a>
                                <a href="#" class="t">日式樱桃陶瓷3.5升高汤锅</a>
                                <strong class="price">36000积分</strong>
                                <span class="xl">月销量：12份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190704/20190704105819_93360.jpg">
                                </a>
                                <a href="#" class="t">日式樱桃陶瓷2.5升小汤锅</a>
                                <strong class="price">29500积分</strong>
                                <span class="xl">月销量：8份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190704/20190704105418_46163.jpg">
                                </a>
                                <a href="#" class="t">日式樱桃陶瓷1.5升煲仔锅</a>
                                <strong class="price">27000积分</strong>
                                <span class="xl">月销量：3份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190704/20190704104623_76244.jpg">
                                </a>
                                <a href="#" class="t">日式樱桃陶瓷单柄奶锅</a>
                                <strong class="price">27000积分</strong>
                                <span class="xl">月销量：0份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190315/20190315170731_87763.jpg">
                                </a>
                                <a href="#" class="t">韩国泡面锅（16cm）</a>
                                <strong class="price">15840积分</strong>
                                <span class="xl">月销量：12份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20190124/20190124154205_82365.jpg">
                                </a>
                                <a href="#" class="t">韩国泡面锅(20cm)</a>
                                <strong class="price">17940积分</strong>
                                <span class="xl">月销量：30份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20181012/20181012163853_29026.jpg">
                                </a>
                                <a href="#" class="t">赛普瑞斯美味双子星双面煎锅</a>
                                <strong class="price">38700积分</strong>
                                <span class="xl">月销量：3份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20181012/20181012161441_83938.jpg">
                                </a>
                                <a href="#" class="t">赛普瑞斯先生黑骑士不粘锅3件套组（炒煎汤）</a>
                                <strong class="price">192600积分</strong>
                                <span class="xl">月销量：11份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                            <div class="jjg_goods_mainlist_item br0">
                                <a href="#" class="img">
                                    <img src="https://s1.st.meishij.net/p2/20181012/20181012161102_86767.jpg">
                                </a>
                                <a href="#" class="t">黑骑士升级款32CM炒锅</a>
                                <strong class="price">136200积分</strong>
                                <span class="xl">月销量：1份</span>
                                <button class="exbtn">兑换</button>
                            </div>
                        </div>
                        <div class="listtyle1_page">
                            <div class="listtyle1_page_w"><a href="" class="current">1</a><a
                                    href="?c0=1&amp;c1=2&amp;page=2">2</a><a href="?c0=1&amp;c1=2&amp;page=2"
                                    class="next">下一页</a></div>
                        </div>
                    </div>
                </div>
                <div class="jf_exchange">
                    <div id="exchangeConnect">
                        <div class="exchangelist">
                            <img src="https://s1.st.meishij.net/p2/20190704/20190704112526_66756.jpg">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>日式樱桃陶瓷3.5升高汤锅</td>
                                    <td>2019-09-22 13:53:55</td>
                                </tr>
                            </table>
                        </div>
                        <div class="exchangelist">
                                <img src="https://s1.st.meishij.net/p2/20190704/20190704105819_93360.jpg">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>日式樱桃陶瓷2.5升高汤锅</td>
                                    <td>2019-09-22 13:53:55</td>
                                </tr>
                            </table>
                        </div>
                        <div class="exchangelist">
                                <img src="https://s1.st.meishij.net/p2/20190704/20190704105418_46163.jpg">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>日式樱桃陶瓷1.5升高汤锅</td>
                                    <td>2019-09-22 13:53:55</td>
                                </tr>
                            </table>
                        </div>
                        <div class="exchangelist">
                                <img src="https://s1.st.meishij.net/p2/20190704/20190704104623_76244.jpg">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>日式樱桃陶瓷单柄奶锅</td>
                                    <td>2019-09-22 13:53:55</td>
                                </tr>
                            </table>
                        </div>
                        <div class="exchangelist">
                                <img src="https://s1.st.meishij.net/p2/20190315/20190315170731_87763.jpg">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>日韩国泡面锅(20cm)</td>
                                    <td>2019-09-22 13:53:55</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>